<template>
  <view class="teamcenter">
    <view class="centerbg">
      <view class="centeruser flex flex-align">
        <image :src="getImgUrl(dataInfo.head_image)" mode="scaleToFill" />
        <view class="centername">
          <view class="name">{{dataInfo.name}}</view>
          <view>
            <view class="id">
              <view class="ids">ID</view>
              <view class="nums">{{dataInfo.id}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 常用功能 -->
    <view class="function bgRadius boxshadow">
      <view class="toolimg">
        <image src="@/static/team/team13.png" mode="scaleToFill" />
      </view>
      <view class="functionbox flex flex-align">
        <!-- <view class="functionitem flex-1">
          <image src="@/static/team/team14.png" mode="scaleToFill" />
          <view>分享</view>
        </view> -->
        <view class="functionitem flex-1">
          <image src="@/static/team/team17.png" mode="scaleToFill" />
          <view>扫一扫</view>
        </view>
        <view class="functionitem flex-1" @click="openShare">
          <image src="@/static/team/team20.png" mode="scaleToFill" />
          <view>邀请码</view>
        </view>
        <view class="functionitem flex-1" @click="openDaili" v-if="dataInfo.level_id==1">
          <image src="@/static/team/team16.png" mode="scaleToFill" />
          <view>我的代理</view>
        </view>
        <view class="functionitem flex-1" @click="menuJump({is_tab: false,link: '/pages/team/newadd?type=2&name=昨日新增',link_type: 1})">
          <image src="@/static/team/team15.png" mode="scaleToFill" />
          <view>我的团员</view>
        </view>
      </view>
    </view>
    <!-- 佣金钱包 -->
    <view class="moneybag bgRadius boxshadow">
      <view class="toolTitle flex flex-align">
        <image src="@/static/team/team19.png" mode="scaleToFill" />
        <view class="toolTitletext">佣金钱包</view>
        <view class="tooljilu flex flex-align flex-center" @click="menuJump({is_tab: false,link: '/pages/team/withdrawRecord',link_type: 1})">
          <view>提现记录</view>
          <image src="@/static/team/team02.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="shujuList flex flex-line">
        <view class="list flex-1">
          <view class="listTitle">预估收益</view>
          <view class="listNum">¥{{teamInfo.commission_wait}}</view>
        </view>
        <view class="list flex-1">
          <view class="listTitle">可提现金额</view>
          <view class="listNum">¥{{teamInfo.commission_cash}}</view>
        </view>
        <view class="list flex-1">
          <view class="listTitle">冻结金额</view>
          <view class="listNum">¥{{teamInfo.commission_freeze}}</view>
        </view>
      </view>
      <view class="moneyBtn flex flex-align">
        <view class="btn flex-1" @click="menuJump({is_tab: false,link: '/pages/team/commissionRecord?type=1&name=佣金明细',link_type: 1})">佣金明细</view>
        <view class="btn flex-1 active" @click="menuJump({is_tab: false,link: '/pages/team/withdraw',link_type: 1})">立即提现</view>
      </view>
    </view>
    <!-- 红包 -->
    <view class="moneybag bgRadius boxshadow">
      <view class="toolTitle flex flex-align">
        <image src="@/static/team/team18.png" mode="scaleToFill" />
        <view class="toolTitletext">红包</view>
        <view class="tooljilu flex flex-align flex-center" @click="menuJump({is_tab: false,link: '/pages/team/rechargeRecord?type=1&name=充值记录',link_type: 1})">
          <view>充值记录</view>
          <image src="@/static/team/team02.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="shujuList flex flex-line">
        <view class="list flex-1">
          <view class="listTitle">当前余额</view>
          <view class="listNum">¥{{teamInfo.red_pack_cash}}</view>
        </view>
        <view class="list flex-1">
          <view class="listTitle">总充值金额</view>
          <view class="listNum">¥{{teamInfo.red_pack_cash_total}}</view>
        </view>
        <view class="list flex-1">
          <view class="listTitle">已发放金额</view>
          <view class="listNum">¥{{teamInfo.red_pack_cash_out_total}}</view>
        </view>
      </view>
      <view class="moneyBtn flex flex-align">
        <view class="btn flex-1" @click="menuJump({is_tab: false,link: '/pages/team/grantRecord?type=1&name=发放明细',link_type: 1})">发放明细</view>
        <view class="btn flex-1 active">去充值</view>
      </view>
    </view>
    <TabBar :tabBarShow="2"></TabBar>
    <dailiInfo ref="selstroeRef" :dataInfo="agent_info" ></dailiInfo>
    <tihuoCode ref="tihuoCodeRef"></tihuoCode>
  </view>
</template>

<script setup lang="ts">
import TabBar from '@/components/TabBar/teamTabBar.vue'
import dailiInfo from './components/dailiInfo.vue'
import { getImgUrl, menuJump } from '@/utils/tools';
import { ref } from 'vue';
import { groupInfo } from '@/api/user';
import { onShow } from '@dcloudio/uni-app';
import { useAuthStore } from '@/stores/counter'
import tihuoCode from './components/tihuoCode.vue'
const selstroeRef = ref<any>(null)
const counter = useAuthStore()
const teamInfo  = ref<Recordable>({})
const agent_info  = ref<Recordable>({})
const dataInfo = ref<Recordable>(counter.dataUser)
const tihuoCodeRef = ref<any>(null)
console.log(dataInfo.value)
function openDaili() {
  selstroeRef.value.open()
}
onShow(() => {
  getTeamCenterInfo()
 
})
// 获取团长中心信息
function getTeamCenterInfo() {
  groupInfo().then((res: any) => {
    console.log(res) 
    teamInfo.value = res.asset
    agent_info.value = res.agent_info
  })
}
function openShare() {
  tihuoCodeRef.value.open()
}
</script>

<style scoped lang="scss">
  .centerbg{background: url('@/static/team/team12.png') no-repeat;background-size: 100% 100%;height: 360rpx;padding:50rpx 30rpx;box-sizing: border-box;
    image{width: 120rpx;height: 120rpx;border-radius: 100%;margin-right: 16rpx;}
    .centername{color: #fff;
      .name{font-size: 32rpx;font-weight: 600;}
     .id{font-size: 24rpx;margin-top: 10rpx;background: rgba(255,255,255,0.5);padding:0rpx 16rpx 0rpx 0;border-radius:30rpx 30rpx 0 30rpx;height:34rpx;display: inline-block;
      .ids{background: #fff;color: #FE7431;border-radius:30rpx 0rpx 30rpx 30rpx;width: 50rpx;text-align: center;margin-right: 10rpx;height: 100%;display: inline-block;}
      .nums{display: inline-block;}
    }
    }
  }
  .toolimg{padding-left: 30rpx;margin-bottom:10rpx;
    image{width: 134rpx;height: 48rpx;}
  }
  .toolTitle{position: relative;
    image{width: 56rpx;height: 56rpx;}
    .toolTitletext{font-size: 28rpx;color: #333;font-weight: bold;}
   .tooljilu{position: absolute;right: -30rpx;top: 0;font-size: 24rpx;color: #333;background:linear-gradient(to right,#FFF2E7 20%,#FFDFD9 80%);
    border-radius:64rpx 0 0 64rpx;padding: 14rpx 10rpx 14rpx 30rpx;
     image{width: 32rpx;height: 32rpx;}
   }
  }
  .function{margin: -140rpx 30rpx 0;padding: 30rpx 0 40rpx;
    .functionbox{
      .functionitem{
        text-align: center;
        image{width: 88rpx;height: 88rpx;}
        view{font-size: 24rpx;color: #333;font-weight: bold;}
      }
    }
  }
  .moneybag{
    margin: 30rpx;padding: 30rpx 30rpx 40rpx;
    .shujuList{margin-top: 40rpx;
      .list{
        text-align: center;position: relative;
        .listTitle{
          color: #969799;font-size: 26rpx;
          image{width: 32rpx;height: 32rpx;}
        }
        .listNum{
          color: #323233;font-size: 36rpx;font-weight: bold;margin-top: 6rpx;
        }
      }
      .list::after{
        content: '';position: absolute;right: 0;top: 50%;width: 1px;height: 40rpx;background: #EAEAEA;margin-top: -20rpx;
      }
      .list:last-child::after{
        background: #fff;
      }
    }
   .moneyBtn{margin-top: 40rpx;
     .btn{
        width: 100%;height:74rpx;color: #FE7431;border-radius: 64rpx;background:#fff;text-align: center;line-height: 74rpx;border: 1px solid #FE7431;
      }
    .btn.active{
        color: #fff;background: #FE7431;
      }
    .btn:nth-child(1){margin-right: 20rpx;}
   }
  }
  
</style>